<template>
<div>
	<ygbh-header></ygbh-header>
	<div class="ygbh-container">
		<div class="ygbh-l-side">
			<div class="ygbh-l-side-inter">
				<ygbh-menu></ygbh-menu>
			</div>
		</div>
		<div class="ygbh-r-side element-doc">
			<router-view />
			<ygbh-footer></ygbh-footer>
		</div>
	</div>
</div>
</template>

<script>
import Maasheader from './layouts/Ygbhheader.vue'
import Maasmenu from './layouts/Ygbhmenu.vue'
import Maasfooter from './layouts/Ygbhfooter.vue'

export default {
	name: 'App',
	components: {
		'ygbh-header': Maasheader,
		'ygbh-menu': Maasmenu,
		'ygbh-footer': Maasfooter
	}
}
</script>

<style lang="scss">
#app{ padding-top: 80px; text-align: left;}
.ygbh-container{ width: 1140px; margin: 0 auto; }
.ygbh-container .ygbh-l-side{ position: fixed; top: 0; bottom: 0; width: 240px; margin-top: 80px;}
.ygbh-container .ygbh-l-side-inter{ height: 100%; overflow: auto; }
.ygbh-container .ygbh-r-side{ padding-left: 270px; }
</style>
